<template>
  <keep-alive>
    <el-row>
      <el-col :span="8">
        <div id='main' style="width: 100%;height: 300px" ref="mainEChart"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </keep-alive>
</template>

<script>
import * as echarts from 'echarts';
import { getPieData } from '../../api/echarts'
     // 接收消息
     window.addEventListener('message', (e) => {
           console.log(e.data)
      })
export default {
  name: "AboutView",
  props: {
    activeName: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      myChart: null,
      intersectionObserver: null,
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    }
  },
  // watch: {
  //   activeName() {
  //     this.myChart.resize()
  //   }
  // },
  
  beforeCreate(){console.log('beforeCreate');},
  created(){console.log('created');},
  beforeMount(){console.log('beforeMount');},
  mounted() {
    console.log('mounted');
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById('main'));
    getPieData().then(res => {
      // console.log(res);
      const { data, status } = res
      if (status == 200) {
        // console.log(data)
        this.option.series[0].data = data.data
        this.myChart.setOption(this.option);
      }
      //防止图表异形-主要针对iframe（HomeView），单纯vue项目用上面的watch-activeName就行（TestView）
      //解决办法一：使用API-Intersection Observer（不兼容ie）
      // this.refreshEchart('main')

      // 解决办法二：使用iframe通讯postMessage，兼容ie
      // 在外部 Vue 的 window 上添加 postMessage 的监听，并且绑定处理函数 handleMessage,
            this.getMessage()
      
    })
  },
  beforeUpdate(){
    console.log('beforeUpdate');
  },
  updated(){
    console.log('updated');
  },
  beforeDestroy(){
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
    //解决办法一：使用API-Intersection Observer（不兼容ie）
    // this.intersectionObserver.unobserve(document.getElementById('main'));
  },
  methods: {
    getMessage(){
          // 接收消息
      window.addEventListener('message', () => {
          //  console.log(e.data)
           this.myChart.resize()
      })
    },
    refreshEchart(id) {
      let lastVisibleStatus = true;
      this.intersectionObserver = new IntersectionObserver((entries) => {
        if (!lastVisibleStatus && entries[0].intersectionRatio > 0) {
          console.log(entries, '需要刷新图表');
          this.myChart.resize()
        }
        lastVisibleStatus = entries[0].intersectionRatio > 0;
      });
      // 开始监听
      this.intersectionObserver.observe(document.getElementById(id));
    }
  }
}
</script>

<style></style>